<template>
    <div style="background-color: #e9f3f7;min-height: 100vh">
        <div class="account-data-box">
            <div class="account-avatar">
                <img v-if="type==='wps'&&account===null" src="../../assets/image/wps.jpg" alt="">
                <img v-if="type==='腾讯文档'&&account===null" src="../../assets/image/腾讯文档.png" alt="">
                <img v-if="account!==null" :src="account.avatar" style="border-radius: 50%;"
            </div>
            <div class="account-txt">
                <span style="font-weight: bold;">{{ account===null?`暂未绑定${type}文档账号`:account.nickname }}</span>
                <span style="padding-top: 5px;font-size: 10px;">{{ account===null?'请先绑定后再进行使用':'切换账号，点击右侧按钮' }}</span>
            </div>
            <!-- <div class="bind-btn-box" v-if="account===null"> -->
            <div class="bind-btn-box">
                <el-button @click="toAuthorization" type="primary" round size="small">{{account===null?'请绑定账号':'切换账号'}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getAccesstoken } from '@/utils/api/authorize';
import {  getFilesList, getUserData } from '@/utils/api/user';
import { useRoute } from 'vue-router';
// import CryptoJS from 'crypto-js';
export default{
    data() {
        return {
            type:'',
            account:null,
            code:'',
            appid:'AK20241114AACUKQ',
            appkey:'3850de23c58a0ae1b55db09d50f2fb49',
            redirect_uri:'https://office-view.xyy.pub/thirdPartyPlatform'
        }
    },
    created(){
        const route=useRoute()
        if(route.query.type){
            this.type=route.query.type
            console.log(this.type,"type")
        }else if(route.query.code){
            this.code=route.query.code
            this.ToAccesstoken()
        }
    },
    methods:{
        toAuthorization(){
            const appid='AK20241114AACUKQ'
            const redirect_uri='https://office-view.xyy.pub/thirdPartyPlatform'
            const scope='file_edit,cloud_file,user_info,file_selector,app_files_synerg_mgr,corp_files_synerg_mgr,corp_address_book,corp_group_permission.all,corp_contacts.read,corp_contacts.user_phone.read,corp_contacts.user_email.read,corp_contacts.user_gender.read'
            if(this.type==='wps'){
                const url=`https://openapi.wps.cn/oauthapi/v2/authorize?response_type=code&appid=${appid}&autologin=false&&scope=${scope}&state=STATE&redirect_uri=${redirect_uri}`
                window.location.href=url
            }else if(this.type==='腾讯文档'){
                
            }
        },
        ToAccesstoken(){
            const that=this
            getAccesstoken({appid:this.appid,appkey:this.appkey,code:this.code}).then(accessdata=>{
                console.log("accessdata",accessdata)
                getUserData({appid:this.appid,openid:accessdata.token.openid,access_token:accessdata.token.access_token}).then(udata=>{
                    console.log("userdata",udata)
                    that.account={...udata.user}
                    getFilesList({appid:this.appid,access_token:accessdata.token.access_token,open_parentid:0}).then(filelist=>{
                        console.log("filelist",filelist)
                    })
                })
                
            })
        }
    }
}
</script>

<style>
.account-data-box{
    display: flex;
    background-color: #fff;
    padding: 5px 0;
}
.account-data-box .account-avatar{
    width: 9%;
    margin: 0 10px;
}
.account-data-box .account-avatar img{
    width: 100%;
    height: 100%;
}
.account-txt{
    flex-direction: column;
    display: flex;
    font-size: 12px;
    justify-content: center;
    overflow: hidden;
}
.account-txt span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bind-btn-box{
    margin-left: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-right: 10px;
}
</style>